<script setup>
import { ref } from "vue"
import { useUserStore } from "@/stores/user"
const userStore = useUserStore()
const emits = defineEmits()
const props = defineProps({
    commentInfo:{
        type:Object,
        Require:true
    },
    postUserId:{
        type:Number,
        Require:true
    },
    showReplay:{
        type:Boolean,
        Require:true
    }
})
const showDelButton = ref(false)
const isAdmin = ref(false)
judgeIsAdmin()
function judgeIsAdmin(){
    const roleList = userStore.userInfo.roles
    if(roleList.length === 0){
        return ElMessage.warning('您没有角色信息！请联系管理员')
    }
    roleList.forEach(role => {
        if(role.name === 'admin'){
            isAdmin.value = true
        }
    });
   
}

isShow()
function isShow(){
 if(isAdmin || props.postUserId === userStore.userInfo.id){
    showDelButton.value = true
 }
}
//删除评论
const onDelReply = (id)=>{
    emits('onDelReplay',id)
}
//加载更多评论
const load = (pageInfo)=>{
    emits('loadMore',pageInfo)
} 
//回复评论
const onReply = (id,name)=>{
    emits('onClickReplay',id,name)
}
</script>
<template>
<!-- 评论 -->
<div class="comments">
    <ul v-infinite-scroll="load(commentInfo.pageInfo)" style="overflow: auto">
        <li class="row" v-for="comment in commentInfo.commentList" :key="comment.id" >
            <div class="firstComment">
                <el-collapse >
                    <div class="head">
                        <el-avatar 
                        class="head-left"
                        :size="40" 
                        :src="comment.user.avatar" />
                        <div class="head-right">
                            <span class="username">{{ comment.user.username }}</span>
                            <div class="time"> {{ comment.createdAt }}</div>
                        </div>
                    </div>
                    <div class="content">{{ comment.content }}</div>
                    <span class="replay"
                    v-show="showReplay"
                    @click="onReply(comment.id,comment.user.username)" 
                    style="color: var(--el-color-primary)">回复</span>
                    <el-popconfirm 
                        title="你确定要删除吗？"
                        confirm-button-text="确定"
                        cancel-button-text="取消"
                        @confirm="onDelReply(comment.id)"
                        @cancel="onCancle">
                        <template #reference>
                            <span 
                            class="delete"
                            v-show="showDelButton"
                            style="color: var(--el-color-primary)"> 删除</span>
                        </template>
                    </el-popconfirm>
                    <el-collapse-item>
                        <!-- 二级评论 -->
                        <div class="secondComment" v-for="thdComment in comment.childComments" :key="thdComment.id">
                            <div class="head">
                                <div class="head-left">
                                    <el-avatar 
                                    :size="40" 
                                    :src="thdComment.user.avatar" />
                                </div>
                                <div class="head-right">
                                    <span class="username">{{ thdComment.user.username }}</span>
                                    <div class="secTime"> {{ thdComment.createdAt }}</div>
                                </div>
                            </div>
                            <span class="secReplay" v-show="showReplay">
                                {{ thdComment.user.username }}回复{{ comment.user.username }}
                            </span>
                            <div class="secContent"> {{ thdComment.content }}</div>
                            <span 
                            v-show="showReplay"
                            class="repButton"
                            @click="onReply(comment.id,thdComment.user.username)" 
                            style="color: var(--el-color-primary)">回复</span>
                           
                            <el-popconfirm 
                                title="你确定要删除吗？"
                                confirm-button-text="确定"
                                cancel-button-text="取消"
                                @confirm="onDelReply(thdComment.id)"
                                @cancel="onCancle">
                                <template #reference>
                                    <span 
                                    class="delButton"
                                    v-show="showDelButton"
                                    style="color: var(--el-color-primary)"> 删除</span>
                                </template>
                            </el-popconfirm>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </li>
    </ul>
</div>
</template>

<style lang="scss" scoped>
.comments{
    width: 100%;
    height: auto;
    overflow: scroll;
    .row{
        list-style: none;
        .firstComment{
            :deep(.el-collapse){
                background-color: rgb(255, 255, 255);
                margin: 10px;
                border-radius: 15px;
                width: 80%;
                .head{
                    display: flex;
                    align-items: flex-start;
                    justify-content: start;
                    height: 15%;
                    .head-left{
                        margin: 20px 20px 15px 20px;
                    }
                    .head-right{
                        margin-top: 10px;
                        .username{
                            display: inline;
                            margin: 2px 0px 20px;
                        }
                        .time{
                            margin-top: 10px;
                            font-size: 15px;
                            color: rgb(175, 175, 175);
                        }
                    }
                }
                .content{
                    margin: 2px 20px ;
                }
                .replay{
                    margin-right: 25px;
                    font-size: 14px;
                    display: flex;
                    flex-direction: row-reverse;
                }
                .delete{
                    margin-right: 25px;
                    font-size: 14px;
                    display: flex;
                    flex-direction: row-reverse;
                }
            }

        }
    }
    .secondComment{
        .secTime{
            font-size: 12px;
            color: rgb(175, 175, 175);
        }
        .secReplay{
            font-size: 12px;
            margin: 2px 20px;
        }
        .secDelete{
            
        }
        .secContent{
            margin: 2px 20px ;
            font-size: 15px;
        }

        .repButton{
            margin-right: 25px;
            font-size: 12px;
            display: flex;
            flex-direction: row-reverse;
        }
        .delButton{
            margin-right: 25px;
            font-size: 12px;
            display: flex;
            flex-direction: row-reverse;
        }
    }
}
::-webkit-scrollbar{
    display: none;
    background-color: aliceblue;
}
</style>